<template>
    <div class="gray-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <strong>系统管理</strong>
            </el-breadcrumb-item>
            <el-breadcrumb-item>灰度发布</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="serve-box">
            <el-table :data="tableData" border height="100%" style="width: 100%">
                <el-table-column prop="serverName" label="服务名称" width="300" />
                <el-table-column prop="ports" label="端口(多个)" width="240" />
                <el-table-column prop="clusterCount" label="集群数量" width="100" />
                <el-table-column prop="serverStatus" label="服务状态" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center;cursor: pointer;" @click="checkServerExceptionReason(scope.row)">
                            <span v-if="scope.row.serverStatus === '0'">正常</span>
                            <span v-else style="color:red">异常</span>
                            <el-icon v-if="scope.row.serverStatus === '0'" color="green" size="18" style="margin-left:12px"><CircleCheck /></el-icon>
                            <el-icon v-else style="margin-left:12px" color="red" size="18"><CircleClose /></el-icon>
                            <!-- <el-button v-if="scope.row.serverStatus === '0'" size="small" type="success" icon="Check" circle style="margin-left:12px" />
                            <el-button v-else size="small" type="danger" icon="Close" circle style="margin-left:12px" /> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="env" label="环境名称(生产/灰度)" width="160" />
                <el-table-column prop="serverIp" label="机器IP" width="150" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="success" @click="showServerDetail(scope.$index, scope.row)">查看详情</el-button>
                        <el-button size="small" type="primary">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-divider />
        <div class="user-item">
            <el-button type="primary" icon="Edit">添加用户</el-button>
            <el-button type="danger" icon="Delete">删除用户</el-button>
            <el-button type="success" icon="WarnTriangleFilled">确认发布灰度</el-button>
            <el-button type="warning" icon="Bell">使用说明</el-button>
            <el-input
                v-model="grayKey"
                class="w-50 m-2"
                placeholder="请输入账户或用户名回车检索"
                size="large"
                suffix-icon="Search"
                @keyup.enter="enterSearchGray"
            />
            <div class="user-list">
                <el-tag
                    v-for="item in items"
                    closable
                    :key="item.grayId"
                    type="info"
                    class="mx-1"
                    effect="dark"
                    @close="deleteGrayUser(item)"
                >
                    {{ item.label }}
                </el-tag>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from "element-plus"
import { ref } from "vue"

const tableData = [
    {
        serverName: 'bobo_planet_gateway_server',
        ports: '30021,30022,30033',
        clusterCount: '15',
        serverStatus: '0',
        env: '生产(prod)',
        serverIp: '192.168.10.1 '
    },
    {
        serverName: 'bobo_planet_gateway_server',
        ports: '30021,30022,30033',
        clusterCount: '15',
        serverStatus: '0',
        env: '生产(prod)',
        serverIp: '192.168.1.10 '
    },
    {
        serverName: 'bobo_planet_gateway_server',
        ports: '30021,30022,30033',
        clusterCount: '15',
        serverStatus: '1',
        env: '灰度(prod)',
        serverIp: '192.168.20.169 '
    },
    {
        serverName: 'bobo_planet_gateway_server',
        ports: '30021,30022,30033',
        clusterCount: '15',
        serverStatus: '0',
        env: '生产(prod)',
        serverIp: '192.168.10.1 '
    },
    {
        serverName: 'bobo_planet_gateway_server',
        ports: '30021,30022,30033',
        clusterCount: '15',
        serverStatus: '0',
        env: '生产(prod)',
        serverIp: '192.168.1.10 '
    },
    {
        serverName: 'bobo_planet_gateway_server',
        ports: '30021,30022,30033',
        clusterCount: '15',
        serverStatus: '1',
        env: '灰度(prod)',
        serverIp: '192.168.20.169 '
    },
    {
        serverName: 'bobo_planet_gateway_server',
        ports: '30021,30022,30033',
        clusterCount: '15',
        serverStatus: '0',
        env: '生产(prod)',
        serverIp: '192.168.10.1 '
    },
    {
        serverName: 'bobo_planet_gateway_server',
        ports: '30021,30022,30033',
        clusterCount: '15',
        serverStatus: '0',
        env: '生产(prod)',
        serverIp: '192.168.1.10 '
    },
    {
        serverName: 'bobo_planet_gateway_server',
        ports: '30021,30022,30033',
        clusterCount: '15',
        serverStatus: '1',
        env: '灰度(prod)',
        serverIp: '192.168.20.169 '
    },
]
const items = ref([
  { grayId: 1, label: '账户: admin ,用户名: 张三丰' },
  { grayId: 2, label: '账户: admin1 ,用户名: 张三丰1' },
  { grayId: 3, label: '账户: admin2 ,用户名: 张三丰2' },
  { grayId: 4, label: '账户: admin3 ,用户名: 张三丰3' },
  { grayId: 5, label: '账户: admin4 ,用户名: 张三丰4' },
  { grayId: 6, label: '账户: admin5 ,用户名: 张三丰5' },
  { grayId: 7, label: '账户: admin4 ,用户名: 张三丰4' },
  { grayId: 8, label: '账户: admin5 ,用户名: 张三丰5' },
])
const grayKey = ref()

const showServerDetail = (index,row)=>{
    ElMessage.success('查看服务详情')
}

const checkServerExceptionReason = (row)=>{
    if(row.serverStatus === '1'){
        ElMessage.success('查看异常原因')
    }
}

const deleteGrayUser = (row)=>{
    ElMessage.warning('删除灰度用户')
}
const enterSearchGray = ()=>{
    ElMessage.success('检索灰度用户,key==》' + grayKey.value)
}
</script>

<style lang="less" scoped>
.gray-box{
    width: 100%;
    height: 100%;
    .serve-box {
        width: 100%;
        height: 50%;
        overflow-y: scroll;
        margin-top: 10px;
    }
    .user-item{
        width: 100%;
        height: 40%;
        overflow-y: scroll;
        .user-list{
            width: 100%;
            margin-top: 10px;
            .mx-1{
                margin: 0 8px 8px 8px
            }
        }
        .m-2{
            margin-left: 20px;
            width: 40%;
            height: 40px;
        }
    }
}
</style>